<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/detils.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2617324_1gqhh2mdtfj.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <ul>
            <!-- 返回按钮 -->
            <li class="back"><a href="index.html"><input type="button" value="Back"></a></li>
            <li>产品详细</li>
            <!-- 五角星 -->
            <li>
                <img src="./images/detils/形状 9.jpg" alt="">
            </li>
        </ul>
    </header>
    <!-- 主体部分 -->
    <div class="main">
        <!-- 背景图 -->
        <div class="banner">
            <img src="./images/detils/图层 5.jpg" alt="">
            <h2>
                <p>&#165; 32</p>
                <a href="#"><input type="button" value="购买"></a>
            </h2>
            <h3>
                <p><img src="./images/detils/形状 9.jpg" alt="">好评度<span>99%</span></p>
                <a href="#">共605个评价&gt;</a>
            </h3>
        </div>
        <div class="Shops">
            <!-- 标题栏 -->
            <h2>
                <p>适用商户</p>
                <a href="#">&gt;</a>
            </h2>
            <!-- 商家列表 -->
            <ul>
                <li>
                    <div class="left">
                        <div class="cover">正佳店</div>
                    </div>
                    <div class="right">
                        <h2>万岁寿司（正佳店）</h2>
                        <h3>
                            <div class="star"></div>
                            <span>10分</span>
                        </h3>
                        <h4>离你100m</h4>
                        <p><a href="#">查看详情&gt;&gt;</a></p>
                        <input type="button" value="进入">
                    </div>
                </li>
                <li>
                    <div class="left">
                        <div class="cover">体育西店</div>
                    </div>
                    <div class="right">
                        <h2>万岁寿司（体育西店）</h2>
                        <h3>
                            <div class="star"></div>
                            <span>10分</span>
                        </h3>
                        <h4>离你100m</h4>
                        <p><a href="#">查看详情&gt;&gt;</a></p>
                        <input type="button" value="进入">
                    </div>
                </li>
                <li>
                    <div class="left">
                        <div class="cover">昌岗店</div>
                    </div>
                    <div class="right">
                        <h2>万岁寿司（昌岗店）</h2>
                        <h3>
                            <div class="star"></div>
                            <span>10分</span>
                        </h3>
                        <h4>离你100m</h4>
                        <p><a href="#">查看详情&gt;&gt;</a></p>
                        <input type="button" value="进入">
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <footer>
        <ul>
            <li>
                <a href="index.html">
                    <i class="iconfont icon-shouye1"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="classify.html">
                    <i class="iconfont icon-fenlei4"></i>
                    <span>分类</span>
                </a>
            </li>
            <li>
                <a href="found.html">
                    <i class="iconfont icon-shouye_r2_c2"></i>
                    <span>发现</span>
                </a>
            </li>
            <li>
                <a href="personal_center.html">
                    <i class="iconfont icon-wode"></i>
                    <span>我的</span>
                </a>
            </li>
        </ul>
    </footer>
</body>
</html>